<script lang="ts" setup>
  import { onMounted, onBeforeUnmount, watch,ref } from 'vue';
  import gmDrawer from '@/components/Drawer/index.vue'
  import { cloneDeep } from "lodash-es"
  import { saveOrUpdateSiteCustomDepartment, getSiteCustomDepartmentById } from "@/api/site"
  import { getShopByProvince } from '@/api/store'
  import { type FormInstance, type FormRules, ElMessage } from "element-plus"
  import useForm from '@/hooks/useForm'
  import useFile from '@/hooks/useFile'
  import CustomerSelect from '@/components/CustomerSelect/index.vue'
  import AdminSelect from '@/components/AdminSelect/index.vue'

//   import videojs from 'video.js';
// import '@videojs/http-streaming';

// import 'video.js/dist/video-js.css';

const videoRef = ref<any>(null);
let player = ref<any>(null);
  
  interface Props {
    id?: number
  }

  const props = withDefaults(defineProps<Props>(), {
    id: 0,
  })

  const form = ref<any>({})
  const formRef = ref<FormInstance>()
  const dialogRef = ref<InstanceType<typeof gmDrawer>>()
  const emit = defineEmits(['cancel','success'])
  const storeList = ref<any>([])

  const flvPlayer = ref<any>(null)
  const flvUrl = ref<string>('')
  let videoElement = ref<any>(null)
  

  onBeforeUnmount(() => {
  if (player.value) {
    player.value.dispose();
  }
});


  const rules: FormRules = {
    name: [
      { required: true, message: '请输入用户名', trigger: 'change' },
    ],
    leaderId: [
      { required: true, message: '请输入场地负责人', trigger: 'change' },
      //{ validator: validatePhone, trigger: 'change' }
    ],
    customIds: [
      { required: true, message: '请选择客户', trigger: 'change' },
    ],
  }

  const { handleSubmit } = useForm({formType: 'dialog', emit:emit})
  const { beforeUpload, uploadUrl } = useFile({maxSize: 10, fileType: 'image'})

  const cancel = ()=>{
    emit('cancel')
  }

  const success =  ()=>{
    const params = {
      ...form.value,
      roleIds: [form.value.roleIds]
    }
    handleSubmit(saveOrUpdateSiteCustomDepartment, formRef.value, params, dialogRef.value)
  }

  const getData = () => {
    getSiteCustomDepartmentById({id:props.id}).then((res: any)=>{
      form.value = res
      // if(res.url) initVideo1(res.url);
    })
  }

  const initVideo1 = (url)=>{
    player.value = videojs(videoRef.value, {
      autoplay: true,
      controls: true,
      responsive: true,
      fluid: true,
      html5: {
        vhs: {
          overrideNative: true, // 强制使用 videojs-http-streaming 解析 HLS
        },
      },
      sources: [
        {
          src: url, // 你的 H.265 M3U8 视频流
          type: 'application/x-mpegURL',
        },
      ],
    });
  }

  if(props.id) getData()
</script>

<template>
  <gmDrawer
      :title="!props.id ? '新增场地' : '编辑场地'"
      @close="cancel"
      :showSubmitBtn="false"
      ref="dialogRef"
      size="800px"
    >
      <div class="fieldTable">
        <el-form ref="formRef" :model="form" :rules="rules" label-width="100px" label-position="top">
          <el-row :gutter="20" class="form-card-main">
            <el-col :span="12">
              <el-form-item label="场地名称" prop="name">
                <el-input v-model="form.name" style="width: 100%" placeholder="请输入" disabled/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="场地负责人" prop="leaderId">
                 <AdminSelect v-model="form.leaderId" :multiple="false" width="100%" disabled></AdminSelect>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="设备编码" prop="imei">
                <el-input v-model="form.imei" style="width: 100%" placeholder="请输入" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="客户" prop="customIds">
                <CustomerSelect v-model="form.customIds" :multiple="true" width="100%" disabled />
              </el-form-item>
            </el-col>
          </el-row>
          <!-- <el-row :gutter="20" class="form-card-main">
            <el-col :span="24">
              <el-form-item label="监控">
                <video ref="videoRef" class="video-js vjs-default-skin"></video>
              </el-form-item>
            </el-col>
          </el-row> -->
        </el-form>
      </div>
    </gmDrawer>
</template>


<style lang="scss" scoped>
#videoPlayer {
  width: 500px;
  height: 300px;
  margin: 50px auto;
}
</style>
